import React,{useState,useContext} from 'react';
import ReactDOM from 'react-dom';
const TodoContext = React.createContext();
function App(){
  const [todoList,setTodoList] = useState([]);
  function addTodo(text){
    setTodoList([...todoList,text]);
  }
  let contextValue = {todoList,addTodo};
  return (
    <TodoContext.Provider value={contextValue}>
      <TodoApp/>
    </TodoContext.Provider>
  )
}
function TodoApp(){
  let  {todoList,addTodo} = useContext(TodoContext);
  const [text,setText]= useState('');
  return (
    <div>
      <input value={text} onChange={event=>setText(event.target.value)}/>
      <button onClick={()=>{
        addTodo(text);
        setText('')
      }}>增加</button>
      <ul>
        {
          todoList.map(item=><li key={item}>{item}</li>)
        }
      </ul>
    </div>
  )
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);
